<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 班级数量</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .button {
            display: inline-block;
            padding: 15px 25px;
            font-size: 5px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            outline: none;
            color: #fff;
            background-color: #4CAF50;
            border: none;
            border-radius: 15px;
            box-shadow: 0 9px #999;
        }

        .button:hover {background-color: #3e8e41}

        .button:active {
            background-color: #3e8e41;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }
    </style>
</head>
<body>
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">发布新内容</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="txt_departmentname">作业id</label>
                    <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" readonly="readonly" value="?">
                </div>
                <div class="form-group">
                    <label for="txt_parentdepartment">作业题目</label>
                    <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="作业标题">
                </div>
                <div class="form-group">
                    <label for="txt_departmentlevel">截止时间</label>
                    <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="如2021-10-26">
                </div>
                <div class="form-group">
                    <label for="txt_statu">作业具体描述</label>
                    <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="简要描述">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>发布</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
</script>
<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
    <thead>
    <tr class="active">
        <th>作业id</th>
        <th>作业标题</th>
        <td>截止时间</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr id="1">
        <td>1</td>
        <td>二重积分的定义</td>
        <td>2021-10-26</td>
        <td rowspan="3"><input type="button" value="发布新作业" class="button" data-toggle="modal" data-target="#mymodal"></td>
    </tr>
    <tr id="2">
        <td >2</td>
        <td>三重积分的定义</td>
        <td>2021-10-21</td>
    </tr>
    <tr >
        <td >3</td>
        <td>总共有几种概型</td>
        <td>2021-10-12</td>
    </tr>
    </tbody>
</table>

</body>
</html>